<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--<link rel="stylesheet" href="../css/bootstrap.css">-->
    <!--<link rel="stylesheet" href="../css/bootstrapValidator.min.css">-->
    <!--<link rel="stylesheet" href="../css/bootstrap-select.css">-->

    <!--<script src="../js/jquery-3.3.1.min.js"></script>-->
    <!--<script src="../js/bootstrap.js"></script>-->
    <!--<script src="../js/bootstrapValidator.min.js"></script>-->
    <!--<script src="../js/bootstrap-select.js"></script>-->
    <!--<script src="../js/i18n/defaults-zh_CN.js"></script>-->

    <title>用户配置</title>


</head>
<body>


<div class="container-fluid panel-body" style="padding-bottom:0px">
    <form class="form-horizontal validation-form" id="formAdd" action="#" th:action="@{/user/add}" method="post">
        <input type="hidden" name="userId" th:value="${user.userId}">
        <input type="hidden" name="password2" th:value="${user.password}">
        <div class="panel panel-default" style="margin-bottom: 0px">
            <h4 class="panel panel-heading h4font" >
                用户配置<small>（＊星号是必填项）</small>
            </h4>

            <div class="panel-body">
                <div class="form-group">
                    <label class="col-sm-1 control-label"><span style="color: red;font-weight: bold">＊</span>用户名</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" name="userName" placeholder="用户名"
                               th:value="${user.userName}">
                    </div>
                    <label class="control-label">（输入类型是
                        字母、数字、下划线或它们的组合，最少3位，最长16位）</label>
                </div>

                <div class="form-group">
                    <label class="col-sm-1 control-label"><span style="color: red;font-weight: bold">＊</span>姓名</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" name="name" placeholder="姓名"
                               th:value="${user.name}">
                    </div>
                    <label class="control-label">（输入类型是汉字、字母、数字、下划线或它们的组合，最少3位，最长16位）</label>
                </div>

                <div class="form-group">
                    <label class="col-sm-1 control-label"><span style="color: red;font-weight: bold">＊</span>密码</label>
                    <div class="col-sm-4">
                        <input type="password" class="form-control" name="password" placeholder="密码"
                               th:value="${user.password}">
                    </div>
                    <label class="control-label">（密码长度至少6位）</label>
                </div>


                <div class="form-group">
                    <label class="col-sm-1 control-label"><span style="color: red;font-weight: bold">＊</span>状态</label>

                    <div class="col-sm-6">
                        <label class="radio-inline">
                            <input type="radio" value=1 name="state" checked th:checked="${user.state}==1? true:false" >正常
                        </label>
                        <label class="radio-inline">
                            <input type="radio" value=2 name="state" th:checked="${user.state}==2? true:false">禁用
                        </label>
                        <label class="radio-inline">
                            <input type="radio" value=0 name="state" th:checked="${user.state}==0? true:false">未认证
                        </label>
                    </div>
                </div>


                <div class="form-group">
                    <label class="col-sm-1 control-label">创建时间</label>
                    <div class="col-sm-4">
                        <input readonly type="text" class="form-control" name="createTime" placeholder=""
                               th:value="${#temporals.format(user.createTime, 'yyyy-MM-dd HH:mm:ss')}">
                    </div>
                    <label class="control-label">（系统自动生成）</label>
                </div>

                <div class="form-group">
                    <label class="col-sm-1 control-label">有效期</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control date form_date" name="expiredDate" placeholder="有效期"
                               th:value="${user.expiredDate}">
                    </div>
                    <label class="control-label">（置空表示永不过期）</label>
                </div>

                <div class="form-group">
                    <label class="col-sm-1 control-label">电话</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" name="tel" placeholder="联系电话"
                               th:value="${user.tel}">
                    </div>
                    <label class="control-label">（格式：139xxxxxxxx）</label>
                </div>

                <div class="form-group">
                    <label class="col-sm-1 control-label">邮箱</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" name="email" placeholder="电子邮箱"
                               th:value="${user.email}">
                    </div>
                    <label class="control-label">（格式：xxx@xxx.com）</label>
                </div>
            </div>
        </div>

        <br/>

        <div class="form-group">
            <div class="col-sm-offset-5 col-sm-1">
                <button type="submit" class="btn btn-primary">保 存</button>
            </div>

            <div class="col-sm-1">
                <button name="backToList" type="button" class="btn btn-primary">返 回</button>
            </div>
        </div>


    </form>

</div>




<script th:inline="javascript">

    $(function () {
        $('button[name="backToList"]').click(function (e) {

            var url="/user/ulist";

            $('#container').load(url);

        });

        var $frm =  $('form[id="formAdd"]');
        $frm.ajaxForm(function (data) {
            console.log(data);
            if(data!=0)
            {
                $('#container').load(data);
            }
            else
            {
                alert("数据提交失败！");
            }
        });

        $frm.bootstrapValidator({
            message: '这是无效输入值',
            feedbackIcons: {/*输入框不同状态，显示图片的样式*/
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields:{
                userName: {/*键名username和input name值对应*/
                    message: 'The user is not valid',
                    validators: {
                        notEmpty: {/*非空提示*/
                            message: '用户名不能为空'
                        },
                        stringLength: {/*长度提示*/
                            min: 3,
                            max: 16,
                            message: '用户名长度必须在3到16之间'
                        },
                        remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}
                            url: '/user/checkUserExists',//验证地址
                            message: '用户已存在',//提示消息
                            delay :  2000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
                            type: 'POST',//请求方式
//                            自定义提交数据，默认值提交当前input value
                            data: function(validator) {
                                return {
                                    userId: /*[[${user.userId}]]*/null,
                                    oldUserName:/*[[${user.userName}]]*/null,
                                    newUserName: $('input[name="userName"]').val()
                                };
                            }
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_\.]+$/,
                            message: '用户名由数字字母下划线和.组成'
                        }
                    }
                },
                name: {/*键名username和input name值对应*/
                    message: 'name is not valid',
//                    threshold :  6 , //有6字符以上才发送ajax请求，（input中输入一个字符，插件会向服务器发送一次，设置限制，6字符以上才开始）
                    validators: {
                        notEmpty: {/*非空提示*/
                            message: '昵称不能为空'
                        },
                        stringLength: {/*长度提示*/
                            min: 3,
                            max: 16,
                            message: '昵称长度必须在3到16之间'
                        }

                    }
                },
                password: {/*键名username和input name值对应*/
                    message: 'password is not valid',
//                    threshold :  6 , //有6字符以上才发送ajax请求，（input中输入一个字符，插件会向服务器发送一次，设置限制，6字符以上才开始）
                    validators: {
                        notEmpty: {/*非空提示*/
                            message: '密码不能为空'
                        },
                        stringLength: {/*长度提示*/
                            min: 6,
                            max: 30,
                            message: '密码长度必须在6到30之间'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_\.]+$/,
                            message: '密码只能由由数字字母下划线和.组成'
                        }
                    }
                }

            }
        });

        //bootstrapValidator导致表单ajax提交出现两次提交Bug解决
        $("form.validation-form").each(function() {
            var $form = $(this);
            $form.bootstrapValidator().on('success.form.bv', function(e) {
                // 阻止默认事件提交
                console.log("success.form.bv阻止默认事件提交");
                e.preventDefault();
            });
        });

        $('.form_date').datetimepicker({
            format:'yyyy-mm-dd',//显示格式可为yyyymm/yyyy-mm-dd/yyyy.mm.dd
            language:  'zh-TW',
//            initialDate: new Date(),        //初始化日期.默认new Date()当前日期
            weekStart: 1,
            todayBtn:  1,
            autoclose: 1,
            todayHighlight: 1,
            startView: 2, //打开时显示的视图。0-'hour' 1-'day' 2-'month' 3-'year' 4-'decade'
            minView: 2,   //最小时间视图。默认0-'hour'
            forceParse: 0    //当输入非格式化日期时，强制格式化。默认true
        });
    })
</script>

</body>
</html>